<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div id="map"></div>
    <button @click="startDraw(0)">点</button>
    <button @click="startDraw(1)">圆</button>
    <button @click="startDraw(2)">线</button>
    <button @click="startDraw(3)">矩形</button>
    <button @click="startDraw(4)">多边形</button>
    <button @click="startDraw(5)">编辑</button>
    <button @click="toggleEditMode">编辑1</button>
    <button @click="deleteSelectedShapes">删除1</button>
    <button @click="startDraw(6)">删除</button>
    <button @click="stopDraw">清除</button>
  </div>
</template>

<script setup>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.chinatmsproviders';
import 'leaflet-polylinedecorator';
import { useTools } from './drawTool';
// import { editTools } from './editTool'
import { onMounted, reactive } from 'vue';
let map = reactive();
let drawControl = reactive();
let drawObj = reactive();
let drawLayerGrounp = reactive();

const initMap = () => {
  // 底图
  map = L.map('map', {
    center: [29.44916482692468, 106.47399902343751], //中心坐标
    zoom: null,
    minZoom: 3,
    maxZoom: 18,
    zoomControl: true,
  });

  // 功能----------------------------------------
  // 地图底层数据
  const baseLayer = {
    高德地图: L.tileLayer(
      'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    ).addTo(map),
  };
  // 配置布局
  L.tileLayer('', { attribution: '卫星影像' }).addTo(map);
  // 地图底层控制
  L.control.layers(baseLayer).addTo(map);
  useTools(map);
};

// 初始化绘制控件
const initDrawCtrl = () => {
  drawLayerGrounp = new L.FeatureGroup();
  map.addLayer(drawLayerGrounp);
  drawControl = new L.Control.Draw({
    draw: {
      polyline: false,
      polygon: false,
      rectangle: false,
      circle: false,
      marker: false,
      circlemarker: false,
    },
    edit: {
      featureGroup: new L.FeatureGroup(),
    },
  });
  map.addControl(drawControl);
  map.on(L.Draw.Event.CREATED, function (event) {
    const layer = event.layer;
    map.addLayer(layer);
  });
};
const toggleEditMode = () => {
  if (drawControl) {
    drawControl.toggleEdit();
  }
};

const deleteSelectedShapes = () => {
  if (drawControl) {
    drawControl.deleteAll();
  }
};
// 启动绘制
const startDraw = function (idx) {
  // 先取消
  if (drawObj) {
    drawObj.disable();
  }
  switch (idx) {
    case 0: {
      // 圆
      drawObj = new L.Draw.Marker(map, drawControl.options.draw.marker);

      break;
    }
    case 1: {
      // 圆
      drawObj = new L.Draw.Circle(map, drawControl.options.draw.circle);

      break;
    }
    case 2: {
      // 线
      drawObj = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
      break;
    }
    case 3: {
      // 矩形
      drawObj = new L.Draw.Rectangle(map, drawControl.options.draw.rectangle);
      break;
    }
    case 4: {
      // 多边形
      drawObj = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
      break;
    }
    case 5: {
      drawObj = new L.EditToolbar.Edit(map, {
        featureGroup: drawLayerGrounp,
        selectedPathOptions: drawControl.options.edit.selectedPathOptions,
      });
      break;
    }
    case 6: {
      drawObj = new L.EditToolbar.Delete(map, {
        featureGroup: drawLayerGrounp,
      });
      break;
    }
  }
  // 启动
  drawObj.enable();
};
//清除绘制
const stopDraw = function () {
  // 删除全部绘制的图层
  if (drawLayerGrounp) {
    drawLayerGrounp.clearLayers();
  }
  // 取消绘制操作
  drawObj.disable();
};
onMounted(() => {
  initMap();
  initDrawCtrl();
});
</script>
<style>
#map {
  height: 800px;
  width: 1000px;
  margin: auto;
  border: 10px solid pink;
  /* color: #88cfff; */
}
</style>
